<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>人流连视图可视化统计</title>
</head>
<body>
<div id="main" style="width: 1000px;height:800px;"></div>
</body>
<script type="text/javascript" src="/SSH_war/layui/layui.js"></script>
<!--<script type="text/javascript" src="/SSH_war/echarts/echarts.all.js"></script>-->
<script type="text/javascript" src="/SSH_war/echarts/echarts.min.js"></script>
<!--<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>-->
<script>
    // var echarts = require('echarts');

    var myChart = echarts.init(document.getElementById('main'));

  var  option = {
        legend: {},
        tooltip: {},
        dataset: {
            source: [
                ['product', '2012', '2013', '2014', '2015'],
                ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
                ['Milk Tea', 86.5, 92.1, 85.7, 83.1],
                ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]
            ]
        },
        xAxis: [
            {type: 'category', gridIndex: 0},
            {type: 'category', gridIndex: 1}
        ],
        yAxis: [
            {gridIndex: 0},
            {gridIndex: 1}
        ],
        grid: [
            {bottom: '55%'},
            {top: '55%'}
        ],
        series: [
            // These series are in the first grid.
            {type: 'bar', seriesLayoutBy: 'row'},
            {type: 'bar', seriesLayoutBy: 'row'},
            {type: 'bar', seriesLayoutBy: 'row'},
            // These series are in the second grid.
            {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
            {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
            {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
            {type: 'bar', xAxisIndex: 1, yAxisIndex: 1}
        ]
    };
  myChart.setOption(option);
</script>
<script type="text/javascript" src="dataView.js"></script>
</html>